<template>
  <view class="content">
    <roc-navbar title="我的" :autoBack="false"></roc-navbar>
    <u-cell-group>
      <u-cell isLink url="/pages/profile/profile">
        <template slot="icon">
          <u-avatar :size="50" :src="avatar"></u-avatar>
        </template>
        <template slot="title">
          <text class="u-m-l-10">{{ name }}</text>
        </template>
      </u-cell>
      <u-cell title="修改密码" isLink url="/pages/updatePassword/updatePassword">
        <template slot="icon">
          <roc-icon-plus name="shield-alt" class="u-m-r-4"></roc-icon-plus>
        </template>
      </u-cell>
      <u-cell title="注销账户" isLink @click="isLogoff = true">
        <template slot="icon">
          <roc-icon-plus name="user-alt-slash"></roc-icon-plus>
        </template>
      </u-cell>
      <u-cell title="退出登录" isLink @click="isLogout = true">
        <template slot="icon">
          <roc-icon-plus name="sign-out-alt" class="u-m-r-4"></roc-icon-plus>
        </template>
      </u-cell>
      <u-cell title="系统版本" :value="`v${app.version}`" isLink @click="handleAppUpdate">
        <template slot="icon">
          <roc-icon-plus name="circle-info" class="u-m-r-4"></roc-icon-plus>
        </template>
      </u-cell>
    </u-cell-group>
    <!-- 注销账号确认框 -->
    <u-modal title="注销账户" :show="isLogoff" :show-cancel-button="true" @confirm="handleLogoff" @cancel="isLogoff = false">
      <view>即将从该系统注销您的账户，本操作会删除该账户的所有内容，确认后该账户将不能登录该系统，是否注销？</view>
    </u-modal>
    <!-- 退出确认框 -->
    <u-modal title="退出登录" :show="isLogout" :show-cancel-button="true" @confirm="handleLogout" @cancel="isLogout = false"><view>是否退出账号？</view></u-modal>
    <roc-app-update v-model="isAppUpdateShow" :appDownloadUrl="app.downloadUrl" title="版本更新" :content="app.versionContent"></roc-app-update>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import { getAppInfo } from '@/mock/app.js'

export default {
  data() {
    return {
      isLogoff: false,
      isLogout: false,
      isAppUpdateShow: false,
      app: {
        version: '',
        versionCode: 0,
        versionContent: '',
        downloadUrl: '',
      },
    }
  },
  onLoad() {
    this.getAppSystemInfo()
    this.$store.dispatch('user/getInfo')
  },
  onShow() {
    this.authToLogin()
  },
  computed: {
    ...mapState({
      avatar: state => state.user.avatar,
      name: state => state.user.name,
    }),
  },
  methods: {
    /**
     * 获取应用系统信息
     */
    getAppSystemInfo() {
      const sysInfo = uni.getSystemInfoSync()
      this.app.version = sysInfo.appVersion
      this.app.versionCode = sysInfo.appVersionCode
    },
    /**
     * 注销账户确认按钮操作
     */
    handleLogoff() {
      this.$store.dispatch('user/logoff').then(() => {
        uni.reLaunch({
          url: '/pages/login/login',
        })
      })
    },
    /**
     * 退出账号确认按钮操作
     */
    handleLogout() {
      this.$store.dispatch('user/logout').then(() => {
        uni.reLaunch({
          url: '/pages/login/login',
        })
      })
    },
    /**
     * 系统更新确认按钮操作
     */
    handleAppUpdate() {
      // #ifdef APP-PLUS
      getAppInfo().then(res => {
        if (res.data.versionCode > this.app.versionCode) {
          // 需要更新
          this.app.versionContent = `发现新版本 v${res.data.version}，为了获得最佳使用体验，建议您尽快进行更新升级。`
          this.app.downloadUrl = res.data.downloadUrl
          this.isAppUpdateShow = true
        } else {
          // 无需更新
          this.$u.toast('已是最新版本')
        }
      })
      // #endif
      // #ifndef APP-PLUS
      this.$u.toast('已是最新版本')
      // #endif
    },
  },
}
</script>

<style lang="scss" scoped></style>
